<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import AMap from 'AMap'
import { getLockdata } from '@/api/sharelock.js'
import available from '@/assets/images/available.png'
import isuse from '@/assets/images/isuse.png'
import repaire from '@/assets/images/repaire.png'
import waiting from '@/assets/images/waiting.png'

var map
var markerTip
const init = async () => {
  map = new AMap.Map('container', {
    zoom: 15,
    center: [106.67295461076733, 26.443118451526143],
    viewMode: '3D'
  })

  const staffid = localStorage.getItem('staffid')
  const position = localStorage.getItem('positions')
  const res = await getLockdata(staffid, position)
  // console.log(res)
  const makers = ref([])
  for (var j = 0; j < res.length; j++) {
    const mak = ref([])
    mak.value.push(res[j].longitude)
    mak.value.push(res[j].latitude)
    // console.log(mak.value)
    makers.value.push(mak.value)
  }
  for (var i = 0; i < makers.value.length; i++) {
    // 'Available','Isuse','Waiting','Repair'
    var icon
    if (res[i].sharelockstatus === 'Available') {
      icon = available
    } else if (res[i].sharelockstatus === 'Isuse') {
      icon = isuse
    } else if (res[i].sharelockstatus === 'Waiting') {
      icon = waiting
    } else {
      icon = repaire
    }
    var marker = new AMap.Marker({
      position: makers.value[i],
      icon: new AMap.Icon({
        size: new AMap.Size(30, 30),
        // 维修；https://img2.baidu.com/it/u=954367600,2921787580&fm=253&fmt=auto&app=138&f=JPEG?w=530&h=500
        // 正在使用：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fspider.ws.126.net%2F7456bc6875d29328aa99f94d6852498a.jpeg&refer=http%3A%2F%2Fspider.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664634810&t=66e15f09bc716c0db562dc494ae15db6
        // 已扫码等待使用中：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F60269.jpg&refer=http%3A%2F%2Fimg.sccnn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664634888&t=858c73b0b9a8abed3f8d013c7bc30b7f
        // 空闲状态：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F22%2F41%2F5b6d87bc68459_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664627318&t=f88936abc9f7c1764bd031decaa65aa4
        image: icon,
        imageSize: new AMap.Size(30, 30)
      })
    })
    // console.log(res[i])
    const item = ref()
    item.value = res[i]
    marker.on('click', (e) => {
      // 添加点击事件
      addMarkerTip(item.value, e)
    })
    map.add(marker)
  }

  // console.log(makers.value[0])
}

const addMarkerTip = (item) => {
  // item 为当前点击的内容
  // 添加点击marker时的提示
  if (markerTip) {
    markerTip.close() // 关闭提示
  }

  console.log(item)
  var markerTipContent = `<div id="#btn" > <span>经度：${item.longitude}</span><br />
    <span>纬度：${item.latitude}</span><br />
    <span>设备类型：${item.lockclassid}</span><br /> 
    <span>设备编号:${item.sharelockid}</span><br />
    <span>设备状态：${item.sharelockstatus}</span><br />
    <span>所属员工：${item.staffid}</span></div>`
  markerTip = new AMap.InfoWindow({
    // 提示插件
    position: new AMap.LngLat(item.longitude, item.latitude),
    content: markerTipContent,
    offset: new AMap.Pixel(2, -6)
  })
  markerTip.open(map)

  setTimeout(() => {
    // 为了获取到 动态添加的元素 用延迟来获取 动态绑定事件
    document.querySelector('#btn').addEventListener('click', () => {
      // 添加详情事件
      console.log(item)
    })
  }, 100)
}

onMounted(() => {
  init()
})
</script>
<style lang="scss" scoped>
#container {
  width: 1300px;
  height: 600px;
  margin-top: 10px;
}
.tipstyle {
  background-color: bisque;
}
</style>
